<template>
  <h3 class="title">axios demo</h3>
  <div class="tab-wrapper">
    <button class="tab" @click="axiosGet">get</button>
    <button class="tab" @click="postJson">post-json</button>
    <button class="tab" @click="postForm">post-form</button>
    <button class="tab" @click="interceptorGet">interceptor</button>
  </div>

  <div class="tab-wrapper">
    <button class="tab" @click="fetchPlayings">正在热映</button>
    <button class="tab" @click="fetchComings">即将上映</button>
    <button class="tab" @click="fetchCities">城市列表</button>
    <button class="tab" @click="fetchCinemas">影院列表</button>
  </div>

  <p>res:{{ res }}</p>
  <p>err:{{ err }}</p>
</template>

<script>
import axios from "axios";
import { getPlayings, getComings } from "@api/movieApi";
import { getCities, getCinemas } from "@api/locationApi";

getPlayings;

export default {
  data() {
    return {
      res: null,
      err: null,
    };
  },
  methods: {
    axiosGet() {
      //this即组件实例
      axios
        .get("http://httpbin.org/get?username=admin&pwd=123456")
        .then((res) => {
          console.log("res=", res);
          this.res = res;
        })
        .catch((err) => {
          console.log("err=", err);
          this.err = err;
        });
    },

    postJson() {
      axios
        .post(
          // url
          "http://httpbin.org/post",

          // 携带的数据 默认json格式
          {
            username: "admin",
            password: "123456",
          },

          // 额外配置
          {
            headers: {
              authorization: "Bearer tokensRealContent",
            },
          }
        )
        .then((res) => {
          console.log("res=", res);
          this.res = res;
        })
        .catch((err) => {
          console.log("err=", err);
          this.err = err;
        });
    },

    postForm() {
      /* 构造表单数据 */
      const params = new URLSearchParams();
      params.append("username", "admin");
      params.append("password", "123456");

      axios
        .post("http://httpbin.org/post", params)
        .then((res) => {
          console.log("res=", res);
          this.res = res;
        })
        .catch((err) => {
          console.log("err=", err);
          this.err = err;
        });
    },

    interceptorGet() {
      const instance = axios.create({
        baseURL: "http://localhost:9000/api",
        timeout: 3000,
      });

      instance.interceptors.request.use(
        // 正确的请求拦截
        function (config) {
          config.headers["authorization"] = "Bearer tokenContent";
          return config;
        },

        // 错误的请求拦截
        function (err) {
          return Promise.reject(err);
        }
      );

      instance.interceptors.response.use(
        // 正确的请求拦截
        function (response) {
          return response.data;
        },

        // 错误的请求拦截
        function (err) {
          return Promise.reject(err);
        }
      );

      /* 使用配置了拦截器的实例发起请求 */
      instance
        .get("/location/cities")
        .then((res) => {
          this.res = res;
          console.log("res=", res);
        })
        .catch((err) => {
          this.err = err;
          console.log("err=", err);
        });
    },

    /* 业务请求 */
    fetchPlayings() {
      getPlayings(5).then((res) => (this.res = res));
    },

    fetchComings() {
      getComings().then((res) => (this.res = res));
    },

    fetchCities() {
      getCities().then((res) => (this.res = res));
    },

    fetchCinemas() {
      getCinemas().then((res) => (this.res = res));
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  padding: 5px;
  margin: 5px;
}
.tab-wrapper {
  display: flex;

  .tab {
    flex-grow: 1;
    margin-right: 2px;
  }
}
</style>
